<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title> I'm a list</title>
    <!-- <script src="vue.js"></script> -->
    <!-- <script src="https://npmcdn.com/vue/dist/vue.js"></script> -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style type="text/css">
/* 必需 */
.expand-transition {
  transition: all .3s ease;
  height: 30px;
  padding: 10px;
  background-color: #eee;
  overflow: hidden;
}
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave {
  height: 0;
  padding: 0 10px;
  opacity: 0;
}
</style>
<body>
	<div id="app">
		<p>hello,I'm a list</p>
		<p><p>这里是----list----master1.0.0</p></p>
		<div v-if="show" :transition="transitionName">hello</div>
		<button v-on:click='btns'>btn</button>
	</div>
</body>
<script>
	new Vue({
		el: '#app',
		methods:{
	  	btns:function(){
	    	this.show=!this.show;
	    }},
		data: {
		    show: false,
			transitionName: 'fade'
		}
	})
</script>
</html>